﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Master.Master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="SisTransportes.Apresentacao.WebForm.Demo.Default" %>

<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeadContent" runat="server">

</asp:Content>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <h1>
        Demo estrutura - Painéis</h1>


     <!-- mensagem -->
    <div class="mensagem msg_erro">
        <h4>Mensagens de erro.</h4>
    </div>
        <div class="mensagem msg_alert">
        <h4>Mensagem de aviso ou alerta.</h4>
    </div>
        <div class="mensagem msg_success">
        <h4>Mensagem de sucesso.</h4>
    </div>
    <!-- /mensagem -->

    <!-- paines -->
    <div class="lista_icones">
        <ul>
            <li><a href="">
                <img src="../Images/iconeConfig.png" title="" alt="" /><span>Configuração</span></a></li>
            <li><a href="">
                <img src="../Images/iconeAdministrador.png" title="" alt="" />
                <span>Administradores</span></a></li>
            <li><a href="">
                <img src="../Images/iconeClientes.png" title="" alt="" />
                <span>Clientes</span></a></li>
            <li><a href="">
                <img src="../Images/iconeMotorista.png" title="" alt="" />
                <span>Motoristas</span></a></li>
            <li><a href="">
                <img src="../Images/iconeVeiculos.png" title="" alt="" />
                <span>Veículos</span></a></li>
            <li><a href="">
                <img src="../Images/iconePagamento.png" title="" alt="" />
                <span>Pagamentos</span></a></li>
            <li><a href="">
                <img src="../Images/iconeAgenda.png" title="" alt="" />
                <span>Contratos</span></a></li>
        </ul>
        <div class="clear">
        </div>
    </div>

    <p>Os painéis possuem variedades de tamanhos e combinações.</p>
    <ul>
            <li>painel_full (largura de 100% da tela)</li>
            <li>painel_grande (combina com um painel_pequeno)</li>
            <li>painel_medio (combina com outro painel_medio)</li>
            <li>painel_pequeno (combina com 2 painel_pequeno ou 1 grande)</li>
        </ul>

    <div class="painel painel_full">
        <h2 class="cabecalho">
            Lorem ipsum dolor sit amet (painel_full)</h2>
        <div>
            <ul>
                <li><a href="">[220293] </a><span>Maecenas hendrerit</span></li>
                <li><a href="">[123456]</a> <span>Nullam id euismod turpi</span></li>
            </ul>
        </div>
    </div>
    <div class="clear">
    </div>
    <div class="painel painel_medio">
        <h3 class="cabecalho">
            In hac habitasse platea dictumsts (painel_medio)</h3>
        <div class="lista_a">
            <ul>
                <li><a href="">Phasellus gravida suscipit </a><span class="m_left_10">dignissim</span>
                    <span class="i f_right">22/02/2012</span></li>
                <li><a href="">Sed malesuada condimentum</a> <span class="m_left_10">laoreet</span>
                    <span class="i f_right">22/02/2012</span></li>
            </ul>
        </div>
    </div>
    <div class="painel painel_medio">
        <h3 class="cabecalho">
            Donec luctus erat sit ame (painel_medio)</h3>
        <div class="lista_a">
            <ul>
                <li><a href="">Cum sociis natoque</a> <span class="m_left_10">amet </span><span class="i f_right">
                    22/02/2012</span></li>
                <li><a href="">Adipiscing egestas </a><span class="m_left_10">ante</span> <span class="i f_right">
                    22/02/2012</span></li>
            </ul>
        </div>
    </div>
    <div class="clear">
    </div>
    <!-- paines -->

    <!-- header -->
    <br />
    <h1>Demo estrutura - Títulos</h1>
    <h2>Sub título</h2>
    <h3>Destaque</h3>
    <h4>Chamada 1</h4>
    <h5>Chamada 2</h5>
    <h6>Chamada 3</h6>
    <!-- /header -->


    <!-- tabelas -->
    <br />
    <h1>Demo estrutura - Tabelas </h1>
    <div class="tabelas">
    <a href="#" class="b">
                    <img src="../Images/itens_01_2.png" width="" height="" alt="Novo" title="Novo" /></a>
        <table>
            <tr>
                <th>Coluna 1</th>
                <th>Coluna 2</th>
                <th><a href="#" class="b">Coluna 3</a></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <td>In hac habitasse platea dictumst</td>
                <td>Phasellus gravida suscipit mi ut dignissim</td>
                <td><span class="b txt_green">Vestibulum</span> </td>
                <td><a href="#" class="b">
                    <img src="../Images/itens_03_2.png" width="" height="" alt="" title="" /></a></td>
                <td><a href="#" class="b">
                    <img src="../Images/itens_02_2.png" width="" height="" alt="Excluir" title="Excluir" /></a></td>
            </tr>
             <tr class="bg_2">
                <td>In hac habitasse platea dictumst</td>
                <td>Phasellus gravida suscipit mi ut dignissim</td>
                <td><span class="b txt_orange">Vestibulum</span> </td>
                <td><a href="#" class="b">
                    <img src="../Images/itens_03_2.png" width="" height="" alt="Editar" title="Editar" /></a></td>
                <td><a href="#" class="b">
                    <img src="../Images/itens_02_2.png" width="" height="" alt="Excluir" title="Excluir" /></a></td>
            </tr>
             <tr>
                <td>In hac habitasse platea dictumst</td>
                <td>Phasellus gravida suscipit mi ut dignissim</td>
                <td><span class="b txt_red">Vestibulum</span> </td>
                <td><a href="#" class="b">
                    <img src="../Images/itens_03_2.png" width="" height="" alt="Editar" title="Editar" /></a></td>
                <td><a href="#" class="b">
                    <img src="../Images/itens_02_2.png" width="" height="" alt="Excluir" title="Excluir" /></a></td>
            </tr>
             <tr class="bg_2">
                <td>In hac habitasse platea dictumst</td>
                <td>Phasellus gravida suscipit mi ut dignissim</td>
                <td><span class="b txt_red">Vestibulum</span> </td>
                <td><a href="#" class="b">
                    <img src="../Images/itens_03_2.png" width="" height="" alt="Editar" title="Editar" /></a></td>
                <td><a href="#" class="b">
                    <img src="../Images/itens_02_2.png" width="" height="" alt="Excluir" title="Excluir" /></a></td>
            </tr>
        </table>
    </div>

    <!-- /tabelas -->


    <!-- filtros -->
    <br />
    <br />
    <h1>Demo estrutura - Filtros</h1>
    <div class="painel_super">
        <div class="filtros">
            <div class="linha">
                <div class="campo">
                    <span class="leg">*In hac habitasse platea dictumst</span>
                    <label id="c1" for="campo1">Pellentesque </label> <input type="text" name="tc1" value="" size="20" />
                </div>
                <div class="campo">
                    <label id="c2" for="campo2">Proin vehicula velit </label> <input type="text" name="tc2" value="" size="120" />
                </div>
                <div class="clear"></div>
            </div>

            <div class="linha">
                <div class="campo">
                    <label id="Label1" for="campo1">Vestibulum </label> <input type="text" name="tc1" value="" size="40" />
                </div>
                <div class="campo">
                    <span class="leg">*Cras quis nibh turpis. Nam at nisl sit amet felis lacinia commodo in</span>
                    <label id="Label2" for="campo2">Donec luctus</label> <input type="text" name="tc2" value="" size="80" />
                </div>
                <div class="campo">
                    <span class="leg">*Cras quis nibh turpis.</span>
                    <label id="Label3" for="campo2">Donec luctus</label> 
                        <select class="larg_200" id="estado-origem" name="estado-origem">
                        <option value="">---</option>
                        <option value="RJ">AAAAA</option>
                        </select>
                </div>
                <div class="clear"></div>
            </div>

            <div class="linha">
                 <div class="campo">
                    <label id="Label4" for="campo1">Vestibulum </label> <input type="text" name="tc1" value="" size="40" />
                </div>
                <div class="campo">
                    <input type="submit" value="pesquisar" />
                </div>
                <div class="clear"></div>
            </div>

        </div>
    </div>
    <!-- /filtros -->

    <!-- menu lateral -->
    <div class="painel_mini">
         <div class="menu_lateral">
            <ul>
                <li><a href="">roin vehicula velit  ></a></li>
                <li><a href="">Cras quis nibh turpis ></a></li>
                <li><a href="">Vestibulum  ></a></li>
                <li><a href="">Phasellus gravida ></a></li>
            </ul>
        </div>
    </div>
    <!-- /menu lateral -->

    <div class="clear"></div>
    

    <!-- tabs -->
     <br />
    <br />
    <h1>Tabs</h1>

    <div class="painel_super">
    
        <!-- tabs -->
        <ul id="tab1" class="tabs">
          <li><a id="t1" href="#tab1">Tab 1</a></li>
          <li><a id="t2" href="#tab2">Tab 2</a></li>
          <li><a id="t3" href="#tab3">Tab 3</a></li>
        </ul>

        <!-- /painel -->
        <div class="panes">
            <div class="pane">Painel 1<br />
                <div class="mensagem msg_erro">
                    <h4>Mensagem não pode ser enviada.</h4>
                    <p>Adeeli roin vehicula velit</p>
                </div>
            </div>
            <div class="pane">Painel 2<br />
                 <div class="mensagem msg_alert">
                    <h4>Não foi possível se conectar com o servidor SMTP.</h4>
                    <p>Han gravida suscipit mi ut dignissim</p>
                </div>
            </div>
            <div class="pane">Painel 3<br />
                 <div class="mensagem msg_success">
                    <h4>Usuário alterado com sucesso.</h4>
                    <p>Han gravida suscipit mi ut dignissim</p>
                </div>
            </div>
        </div>
        <!-- /painel -->
        <script type="text/javascript">
            jQuery(function () {
                jQuery("#tab1").tabs("div.panes > div");
            });
        </script>
    </div>
    <div class="clear"></div>
    <!-- /tabs -->


     <!-- formulario -->
    <br />
    <br />
    <h1>Demo estrutura - Formulário</h1>
    <div class="painel_super">

        <!-- mensagem -->
        <div class="mensagem msg_erro">
            <h4>Mensagem não pode ser enviada.</h4>
            <p>Adeeli roin vehicula velit</p>
        </div>
         <div class="mensagem msg_alert">
            <h4>Não foi possível se conectar com o servidor SMTP.</h4>
            <p>Han gravida suscipit mi ut dignissim</p>
        </div>
         <div class="mensagem msg_success">
            <h4>Usuário alterado com sucesso.</h4>
            <p>Han gravida suscipit mi ut dignissim</p>
        </div>
        <!-- /mensagem -->

        <div class="formulario">
            <fieldset>
                <legend>formulário</legend>

                <div class="linha">
                    <div class="campo">
                        <label for="">Cum sociis natoque <span class="txt_red">*</span></label>
                        <input type="text" id="" name="" value="" />
                    </div>
                    <div class="campo">
                        <span class="leg">*Cras quis nibh turpis.</span>
                        <label for="">Nam at nisl sit amet</label>
                        <input type="text" id="Text1" name="" value="" size="76" />
                    </div>
                    <div class="campo">
                        <label for="">Cum </label>
                        <input type="text" id="Text2" name="" value="" size="20" />
                    </div>
                    <div class="clear"></div>
                </div>

                 <div class="linha">
                    <div class="campo">
                        <label for=""> Quisque id risus nis</label>
                        <input type="text" id="Text3" name="" value="" size="60" />
                    </div>
                    <div class="campo">
                        <span class="leg">*Integer accumsan tellus vel dui fermentum a pretium diam aliquam..</span>
                        <label for="">Pellentesque </label>
                        <input type="text" id="Text4" name="" value="" size="76" />
                    </div>
                    <div class="clear"></div>
                </div>

                 <div class="linha">
                    <div class="campo">
                        <span class="leg">*fermentum a pretium diam aliquam..</span>
                        <label for="">Pellentesque </label>
                        <input type="radio" id="Radio1" name="r" /><label class="i" for="Radio1">pellentesque </label> 
                         <input type="radio" id="Radio2" name="r" /><label class="i" for="Radio2">fermentum </label>
                    </div>
                    <div class="campo">
                        <span class="leg">*fermentum a pretium diam aliquam..</span>
                        <label for="">Pellentesque </label>
                        <input type="checkbox" name="v1" id="Chk1" /><label class="i" for="Chk1">nisl </label> 
                        <input type="checkbox" name="v2" id="Chk2" /><label class="i" for="Chk2">diam </label>
                        <input type="checkbox" name="v3" id="Chk3" /><label class="i" for="Chk3">tellus </label>
                    </div>
                    <div class="clear"></div>
                </div>

                <div class="linha">
                    <div class="campo">
                        <label for="">Pellentesque </label><br />
                        <textarea name="" rows="5" cols="120"></textarea>
                    </div>
                    <div class="clear"></div>
                </div>

                <div class="linha">
                    <div class="campo">
                        <input type="submit" id="Text5" value="salvar" />
                    </div>
                    <div class="clear"></div>
                </div>

            </fieldset>
        </div>
    </div>
    <div class="clear"></div>
    <!-- /formulario -->

    <br />
    <br />
    <h1>Demo MultView</h1>
    <a href="DemoMultView.aspx">veja o demo aqui >></a>
    <div class="clear"></div>

     <br />
    <br />
</asp:Content>
